// 图片裁剪类
define([
  "cropper", 
  "style!croppercss"
], function() {
  function cropperFn(ops, el) {
    var $image = el;
    var minAspectRatio = 0.5;
    var maxAspectRatio = 1.5;

    var $previews = $('.preview');

    var cropperobj = $image.cropper({
      viewMode: 1,
      dragMode: 'move',
      autoCropArea: 0.65,
      restore: false,
      guides: true,
      highlight: false,
      cropBoxMovable: false,
      cropBoxResizable: false,
      ready: function() {
        var containerData = $image.cropper('getContainerData');
        var cropBoxData = $image.cropper('getCropBoxData');
        var aspectRatio = cropBoxData.width / cropBoxData.height;
        var newCropBoxWidth;

        $image.cropper('setCropBoxData', {
          left: (containerData.width - 184) / 2,
          top: (containerData.height - 184) / 2,
          width: 184,
          height: 184
        });

        if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
          newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);

          $image.cropper('setCropBoxData', {
            left: (containerData.width - newCropBoxWidth) / 2,
            width: newCropBoxWidth
          });
        }

        var $clone = $(this).clone().removeClass('cropper-hidden');

        $clone.css({
          display: 'block',
          width: '100%',
          minWidth: 0,
          minHeight: 0,
          maxWidth: 'none',
          maxHeight: 'none'
        });

        $previews.css({
          width: '100%',
          overflow: 'hidden',
          display: 'block'
        }).html($clone);

        $(".previewDiscribe").show();
      },
      cropmove: function() {
        var cropBoxData = $image.cropper('getCropBoxData');
        var aspectRatio = cropBoxData.width / cropBoxData.height;

        if (aspectRatio < minAspectRatio) {
          $image.cropper('setCropBoxData', {
            width: cropBoxData.height * minAspectRatio
          });
        } else if (aspectRatio > maxAspectRatio) {
          $image.cropper('setCropBoxData', {
            width: cropBoxData.height * maxAspectRatio
          });
        }
      },
      crop: function (e) {
        var imageData = $(this).cropper('getImageData');
        var previewAspectRatio = e.width / e.height;
 
        $previews.each(function () {
          var $preview = $(this);
          var previewWidth = $preview.width();
          var previewHeight = previewWidth / previewAspectRatio;
          var imageScaledRatio = e.width / previewWidth;

          console.log(e.width);
          console.log(previewWidth);
          console.log(imageScaledRatio);

          $preview.height(previewHeight).find('img').css({
            width: imageData.naturalWidth / imageScaledRatio,
            height: imageData.naturalHeight / imageScaledRatio,
            marginLeft: -e.x / imageScaledRatio,
            marginTop: -e.y / imageScaledRatio
          });
        });
      }
    });

    return cropperobj;
  }

  return cropperFn;
});